<!DOCTYPE html>
<html>

<head>
    <title>PhotoGallery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="styles/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="styles/common.css">
    <link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC7i3rwi0m9C5ASjMdfHrEOVvZ4AuloGX0&sensor=false&libraries=places"></script>
    <script src="js/dom.js" type="text/javascript"></script>
    <script src="js/ajax.js" type="text/javascript"></script>
    <script src="js/framework.js" type="text/javascript"></script>
    <script src="js/validation.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/tags.js"></script>
    <script type="text/javascript" src="js/registration.js"></script>
    <script type="text/javascript" src="js/validation.js"></script>
    <style>
        #map {
            height: 150px;
            width: 100%;
        }
        
        #place {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin: 5px 20px;
            padding: 0 11px 0 13px;
            width: 70%;
        }
    </style>
</head>

<body>
    <noscript>You must set your browser to enable Javascript in order to access certain functions of this site.</noscript>
    <div id="main-wrapper">

        <div data-template="header" class="loader"></div>

        <div id="content">
            <div id="bg">
                <h1>Uploading</h1>
                <div id="fileuploader">
                    <form id="uploadform" action="ajax/upload.php" method="POST" enctype="multipart/form-data" onsubmit="return framework.handleSubmit(this)">
                        <div class="file-input-wrapper">
                            <button class="default-button">Choose photo</button>
                            <input type="file" name="file" id="uploadedfile" onchange="framework.startupload();" onclick=" this.value = null;" />
                        </div>
                        <p><span class="helper-input">The image must have a type jpg or jpeg. Maximum image width should be 2000px and maximum size 2 MB.</span></p>
                    </form>
                </div>
                <div id="uploadprogress" class="loader hidden">
                </div>
                <div id="uploadresult" class="hidden">
                    Results
                </div>
                <div id="fieldsuploader" class="hidden">
                    <form id="uploadDescriptionForm" method="POST" enctype="multipart/form-data">
                        <p>
                            <input type="hidden" name="fileName" id="fileName" />
                        </p>
                        <span class="field-area">
                            <label for="uploadTitle">* Title:</label>
                            <input type="text" name="uploadTitle" class="form-input" data-validation-upload="field"/>
                            <span class="error-message"></span><br>
                        </span>
                        <span class="field-area">
                            <label for="uploadDate">* Date:</label>
                            <input type="date" name="uploadDate" class="form-input" data-validation-upload="field"/>
                            <span class="error-message"></span><br>
                        </span>
                        <p>
                            <label for="uploadCategory">* Category:</label>
                            <select name="uploadCategory" id="uploadCategory" class="form-input"></select>
                        </p>
                        <span class="field-area">
                            <label for="uploadDescrText">* Description:</label>
                            <textarea name="uploadDescrText" class="form-input" data-validation-upload="field"></textarea>
                            <span class="error-message"></span><br>
                        </span>
                        <p>
                            <label for="uploadPlace">Location:</label>
                            <input type="text" name="uploadPlace" id="place" placeholder="Enter a location"/>
                            <div id="map"></div>
                            <input type="hidden" id="latitude">
                            <input type="hidden" id="longitude">
                        </p>
                        <div data-template="tagsedit" class="loader"></div>
                        <p><span class="helper-input">(Fields marked with a * are required.)</span></p>
                        <p>
                            <input type="button" id="submitDescription" class="action-button" value="Send" onclick="framework.sendData(document.forms['uploadDescriptionForm']);"/>
                        </p>
                        <p id="changePhoto"></p>
                    </form>
                </div>
            </div>
        </div>

        <div data-template="footer" class="loader"></div>

    </div>
</body>

</html>